<script lang="ts" setup>
	import { ref } from "vue";
	import {
		useRouter
	} from 'uni-mini-router'
	import zhaoshangCard from '@/components/zhaoshang-card/zhaoshang-card.vue'
	import DaDropdown from '@/components/da-dropdown/index.vue'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/pinia';

	const userStoreInfo = userStore();
	console.log(userStoreInfo.userInfo, "打印userStoreInfo")
	const {
		proxy,
	} = getCurrentInstance()
	const router = useRouter()
	let searchWord = ref('')
	let list1 = ref(['http://image.qiniu.qdytcy.com/2023/7/12/getBusiness.png'])
	let listData = ref([])
	let shopJinList = ref<any>([])
	let tabId = ref(0)
	const searchPage = () => {
		console.log("搜索")
		pageNum.value = 1
		getListMenu()
	}
	onReachBottom(() => {
		pageNum.value++
		getList()
	})
	const getScreen = () => {
		proxy.$req('GET', proxy.$api.zhaoShangScreen, {}).then((res) => {
			console.log(res, 'res');
			shopJinList.value = res.result.records
			category.value = res.result.records[0].id
			console.log("打搜索接口", res)
			getList()
		})
	}
	getScreen()
	let menuIndex1 = ref(0)
	let menuIndex2 = ref(null)
	let menuIndex3 = ref(null)
	let sequentialOrReverse = ref(0)
	let category = ref('')
	//点击菜单搜索
	const menuClick1 = (item, index) => {
		menuIndex1.value = index
		category.value = item.id
		pageNum.value = 1
		getListMenu()
	}
	const menuClick2 = (item, index) => {
		menuIndex2.value = index
		category.value = item.id
		pageNum.value = 1
		getListMenu()
	}
	const menuClick3 = (item, index) => {
		menuIndex3.value = index
		category.value = item.id
		pageNum.value = 1
		getListMenu()
	}
	let pageNum = ref(1)
	const getListRefresh = () => {
		let url;
		let id;
		if (userStoreInfo.userFlag == 2) {
			url = proxy.$api.getSearchOwnMerchants
			id = userStoreInfo.userInfo.supplier.id
		} else {
			console.log("进来了")
			url = proxy.$api.getSearc
			id = ''
		}
		proxy.$req('GET', url, {
			supplierId: id,
			orderBy: tabId.value,
			pageNo: pageNum.value,
			pageSize: 10,
			sequentialOrReverse: sequentialOrReverse.value
		}).then((res) => {
			listData.value = res.result.records
		})
	}
	const getListMenu = () => {
		let url;
		let id;
		if (userStoreInfo.userFlag == 2) {
			url = proxy.$api.getSearchOwnMerchants
			id = userStoreInfo.userInfo.supplier.id
		} else {
			console.log("进来了")
			url = proxy.$api.getSearc
			id = ''
		}
		proxy.$req('GET', url, {
			category: category.value,
			keyWord: searchWord.value,
			supplierId: id,
			orderBy: tabId.value,
			pageNo: pageNum.value,
			pageSize: 10,
			sequentialOrReverse: sequentialOrReverse.value
		}).then((res) => {
			listData.value = res.result.records
		})
	}
	const getList = () => {
		let url;
		let id;
		if (userStoreInfo.userFlag == 2) {
			url = proxy.$api.getSearchOwnMerchants
			id = userStoreInfo.userInfo.supplier.id
		} else {
			console.log("进来了")
			url = proxy.$api.getSearc
			id = ''
		}
		let a = {
			category: category.value,
			keyWord: searchWord.value,
			supplierId: id,
			orderBy: tabId.value,
			pageNo: pageNum.value,
			pageSize: 10,
			sequentialOrReverse: sequentialOrReverse.value
		}
		proxy.$req('GET', url, {
			category: category.value,
			keyWord: searchWord.value,
			supplierId: id,
			orderBy: tabId.value,
			pageNo: pageNum.value,
			pageSize: 10,
			sequentialOrReverse: sequentialOrReverse.value
		}).then((res) => {
			listData.value = listData.value.concat(res.result.records)
		})
	}
	const DaDropdownRef = ref()
	const dropdownMenuList = ref([
		{
			title: '综合',
			type: 'sort',
			prop: 'all',
			value: true,
			orderBy: 0,
		},
		{
			title: '点赞量',
			type: 'sort',
			prop: 'like',
			orderBy: 1,
		},
		{
			title: '收藏量',
			type: 'sort',
			prop: 'collect',
			orderBy: 2,
		}, {
			title: '浏览量',
			type: 'sort',
			prop: 'view',
			orderBy: 3,
		}, {
			title: '咨询量',
			type: 'sort',
			prop: 'talk',
			orderBy: 4,
		},
	])
	let zhaoPage = ref(1)
	let zhaoList = ref([])
	let screenType = ref()
	const handleConfirm = (v) => {
		//点击筛选
		console.log(v, '打印v');
		pageNum.value = 1
		listData.value = []
		let key = Object.keys(v)[0]
		screenType.value = key


		if (v[key] == 'asc') {
			sequentialOrReverse.value = 1
		} else if (v[key] == 'desc') {
			sequentialOrReverse.value = 2
		} else {
			sequentialOrReverse.value = 0
		}
		dropdownMenuList.value.forEach((item, index, arr) => {
			console.log(item);
			if (key !== item.prop) {
				//value是控制箭头状态
				//isActived是控制文字状态
				delete dropdownMenuList.value[index].value
				delete dropdownMenuList.value[index].isActived
			}
		})
		// getMarketList()
		dropdownMenuList.value.forEach(item => {
			if (item.prop == screenType.value) {
				console.log("进来了循环")
				tabId.value = item.orderBy
			}
		})
		getList()

	}
	const handleClose = (v) => {
		// console.log('handleClose ==>', v)
	}
	const handleOpen = (v) => {
		// console.log('handleOpen ==>', v)
	}
	const routerLink = (e) => {
		uni.$on('refreshZhao', (e) => {
			pageNum.value = 1
			listData.value = []
			getListRefresh()
			uni.$off('refreshZhao')
		})
		router.push({
			name: e,
			params: {}
		})
	}
	const refresh = () => {
		uni.$on('inRefash', (e) => {
			listData.value = []
			pageNum.value = 1
			getList()
			uni.$off('inRefash')
		})
	}
	onShow(() => {
		uni.$off('inRefash')
	})
	onUnload(() => {
		uni.$off('inRefash')
	})
</script>
<template>
	<view class="navbar">
		<u-navbar :placeholder="true" leftText="" title="" auto-back>
			<template #center>
				<view style="width: 80%;">
					<u-search placeholder="搜索" v-model="searchWord" :showAction="false" shape="square"
						@search="searchPage"></u-search>
				</view>
			</template>
		</u-navbar>
	</view>
	<view class="containerBox">
		<view class="getBusiness">
			<text style="">美业招商合作中心</text>
		</view>
		<view class="shopScrollList">
			<swiper :interval="3000" :duration="1000" :circular="false" class="middle "
				indicator-active-color="#FFCC00">
				<swiper-item class="">
					<view class="middle_list c-flex-center-center" v-for="(item,index) in shopJinList.slice(0,8)"
						:key="item.img" @click="menuClick1(item,index)">
						<image :src="menuIndex1==index?item.chooseLogoAddr:item.logoAddr"></image>
						<text :class="menuIndex1==index?'choseBorder':''">{{ item.typeName }}</text>
					</view>
				</swiper-item>
				<swiper-item class="" v-if="shopJinList.length>8">
					<view class="middle_list c-flex-center-center" v-for="(item,index) in shopJinList.slice(8,16)"
						:key="item.img" @click="menuClick2(item,index)">
						<image :src="menuIndex1==index?item.chooseLogoAddr:item.logoAddr"></image>
						<text :class="menuIndex2==index?'choseBorder':''">{{ item.typeName }}</text>
					</view>
				</swiper-item>
				<swiper-item class="" v-if="shopJinList.length>16">
					<view class="middle_list c-flex-center-center" v-for="(item,index) in shopJinList.slice(16,32)"
						:key="item.img" @click="menuClick3(item,index)">
						<image :src="menuIndex1==index?item.chooseLogoAddr:item.logoAddr"></image>
						<text :class="menuIndex3==index?'choseBorder':''">{{ item.typeName }}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
	<view class="screenBox">
		<DaDropdown ref="DaDropdownRef" v-model:dropdownMenu="dropdownMenuList" themeColor="#CB645E" textColor="#BFBFBF"
			:duration="300" :fixedTop="false" :menuActiveText="false" @confirm="handleConfirm" @close="handleClose"
			@open="handleOpen">
		</DaDropdown>
	</view>
	<view class="list" v-if="listData.length>0">
		<zhaoshang-card :type="'investmentDetail'" :listData="listData" @refresh="refresh"></zhaoshang-card>
	</view>
	<view class="" style="margin-top: 150rpx;" v-else>
		<u-empty mode="list">
		</u-empty>
	</view>
	<view class="gysBtn" v-if="userStoreInfo.userFlag == 2" @click="routerLink('gysAddZhao')">
		发布 招商
	</view>
</template>
<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.choseBorder {
		color: #CB645E;
	}

	.gysBtn {
		width: 686rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background-color: #CB645E;
		color: #fff;
		border-radius: 10rpx;
		position: fixed;
		bottom: 40rpx;
		left: 32rpx;
	}

	.navbar {
		width: 100%;
		height: 110rpx;
		background-color: #fff;
	}

	.containerBox {
		box-sizing: border-box;
		width: 100%;
		padding: 40rpx 32rpx 0;
		margin: 0 auto;
		background-color: #fff;

		.getBusiness {
			width: 100%;
			height: 200rpx;
			// background-color: #e7e7e7;
			background-image: url('http://image.qiniu.qdytcy.com/2023/7/12/getBusiness.png');
			background-size: 100%;
			border-radius: 10rpx;
			// margin-top: 40rpx;
			color: #fff;

			text {
				display: inline-block;
				font-size: 36rpx;
				margin-top: 68rpx;
				margin-left: 32rpx;
				font-weight: 600;
			}
		}


	}

	.screenBox {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		margin: 32rpx 0;
		display: flex;
		align-items: flex-end;
	}

	.shopScrollList {
		width: 100%;
		margin: 32rpx auto 0;

		.middle {
			margin-top: 40rpx;
			width: 100%;
			height: 340rpx;
			overflow-x: scroll;

			// white-space: nowrap;
			.middle_list {
				width: 20%;
				height: 170rpx;
				display: inline-block;
				text-align: center;

				image {
					margin-left: 17%;
					display: block;
					width: 96rpx;
					height: 96rpx;
					border-radius: 50rpx;
				}

				text {
					line-height: 60rpx;
					font-size: 26rpx;
					display: block;
				}
			}
		}

	}

	.list {
		width: 100%;
	}
</style>